<script setup lang="ts">
  // import Mail from "@/components/Mail/Mail.vue";
  // import TeamSwitcher from "@/components/TeamSwitcher.vue";
  // import { accounts, mails } from "@/data/mails";
  import UserNav from "@/components/DataTables/UserNav.vue";
  import DataTable from "@/components/DataTables/DataTable.vue";
  import tasks from '@/data/tasks.json'
  import { columns } from "@/components/DataTables/columns.ts";
</script>

<template>
  <div class="flex h-full flex-1 flex-col space-y-8 p-8 border shadow-md">
    <div class="flex items-center justify-between space-y-2">
      <div>
        <h2 class="text-2xl font-bold text-indigo-500 tracking-tight">Welcome back!</h2>
        <p class="text-muted-foreground">Here's a list of your tasks for this month!</p>
      </div>
      <div class="flex items-center space-x-2">
        <UserNav />
      </div>
    </div>
    <DataTable :data="tasks" :columns="columns" />
  </div>

  <!--  <div class="hidden flex-col md:flex">-->

  <!--    <TeamSwitcher/>-->
  <!--    <Mail :accounts="accounts"-->
  <!--          :mails="mails"-->
  <!--          :nav-collapsed-size="4"/>-->
  <!--  </div>-->
</template>

<style scoped></style>
